<!--
 * @Date: 2023-10-12 14:38:39
 * @Description: 巡库官网
 * @LastEditors: hujingyang
 * @Author: hujingyang
 * @FilePath: \xunku_official_website\src\App.vue
 * @IDE: Created by VScode.
-->

<template>
  <el-config-provider :locale="locale">
    <div class="screen-container">
      <el-affix :offset="0">
        <HeaderComponent aria-label="页面顶部导航组件" />
      </el-affix>

      <div class="view-screen" ref="scrollView">
        <router-view v-slot="{ Component }">
          <component :is="Component" :key="$route.name" />
        </router-view>
        <FooterComponent aria-label="页面底部版权信息组件" />
      </div>
    </div>
  </el-config-provider>
</template>

<script lang="ts">
import { ref, watch, onUnmounted } from "vue";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { useStore } from "vuex";

export default {
  components: { ElConfigProvider },
  setup() {
    let locale = ref(zhCn); //国际化
    const scrollView: any = ref(null);
    const storeVuex = useStore();

    /**监听vuex中的scrollTop，当值改变时，重置浏览器滚动条至页面顶部 */
    const watchScrollTop = watch(
      () => storeVuex.state.scrollTop,
      () => {
        // console.log("6666");
        document.getElementById("app")?.scrollTo({ top: 0 });

        // scrollView.value?.scrollTo({ top: 0 });
      }
    );

    /**生命周期函数 - 页面卸载完成时执行 */
    onUnmounted(() => {
      watchScrollTop();
    });

    return {
      locale,
    };
  },
};
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  min-height: 100%;
  min-width: 1000px;
  // overflow: auto;
  position: relative;
  background-color: #fff;

  .view-screen {
    position: absolute;
    top: 40px;
    width: 100%;
  }
}
</style>
